<template>
  <div class="container">
    <!-- 原有的首页表单和信息展示部分 -->
    <!-- 输入表单区 -->
    <div class="form-section">
      <div class="input-group">
        <label>姓名：</label>
        <input type="text" v-model="userName">
        <span v-if="userName.trim().length > 0 && userName.trim().length < 2" class="error">
          姓名至少需要2个字符
        </span>
      </div>

      <div class="input-group">
        <label>年龄：</label>
        <input type="number" v-model="userAge">
        <span v-if="userAge!== '' &&!isValidAge" class="error">
          年龄必须在18 - 100岁之间
        </span>
      </div>

      <div class="input-group">
        <label>技术方向：</label>
        <div class="dropdown">
          <button class="dropdown-toggle" @click="toggleTechDirectionDropdown">
            {{ selectedTechDirection || '请选择技术方向' }}
            <i class="fa fa-chevron-down" :class="{ 'rotate': isTechDirectionDropdownOpen }"></i>
          </button>
          <div class="dropdown-menu" v-show="isTechDirectionDropdownOpen">
            <div class="dropdown-item" v-for="direction in techDirections" :key="direction" @click="selectTechDirection(direction)">
              {{ direction }}
            </div>
          </div>
        </div>
      </div>

      <div class="input-group">
        <label>技能标签：</label>
        <div class="dropdown">
          <button class="dropdown-toggle" @click="toggleSkillsDropdown">
            {{ selectedSkillsText || '请选择技能标签' }}
            <i class="fa fa-chevron-down" :class="{ 'rotate': isSkillsDropdownOpen }"></i>
          </button>
          <div class="dropdown-menu" v-show="isSkillsDropdownOpen">
            <div class="dropdown-item" v-for="skill in filteredSkills" :key="skill" @click="toggleSkill(skill)">
              <input type="checkbox" :checked="selectedSkills.includes(skill)" class="mr-2">
              {{ skill }}
            </div>
          </div>
        </div>
      </div>
      <button class="submit-button" @click="submitForm" :disabled="isSubmitting">
        {{ isSubmitting ? '提交中...' : '提交表单' }}
      </button>
    </div>

    <!-- 信息展示区 -->
    <div class="info-card" :style="cardTheme">
      <h2>{{ userName || '未命名用户' }}</h2>
      <p>年龄：{{ userAge || '未填写' }}</p>
      <p>技术方向：{{ selectedTechDirection || '未选择' }}</p>
      <p>技能标签：
        <span v-for="skill in selectedSkills" :key="skill" class="skill-tag">
          {{ skill }}
        </span>
      </p>
      <div class="status-tag">
        {{ userStatus }}
      </div>
    </div>

    <!-- 提交结果模态框 -->
    <div v-if="showResultModal" class="modal" @click.self="closeModal">
      <div class="modal-content" :class="{ 'success': submitSuccess, 'error': !submitSuccess }">
        <div class="modal-header">
          <h3>{{ submitSuccess ? '提交成功' : '提交失败' }}</h3>
          <button class="close-btn" @click="closeModal">&times;</button>
        </div>
        <div class="modal-body">
          <p>{{ submitMessage }}</p>
        </div>
        <div class="modal-footer">
          <button class="modal-btn" @click="closeModal">
            {{ submitSuccess ? '继续' : '重试' }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 响应式数据
const userName = ref('')
const userAge = ref('')
const selectedTechDirection = ref('')
const selectedSkills = ref([])

// 下拉菜单状态
const isTechDirectionDropdownOpen = ref(false)
const isSkillsDropdownOpen = ref(false)

// 表单状态
const isSubmitting = ref(false)
const showResultModal = ref(false)
const submitSuccess = ref(false)
const submitMessage = ref('')

// 技术方向和技能数据
const techDirections = ref(['前端', '后端', '全栈'])

const allSkills = ref({
  '前端': ['HTML', 'CSS', 'JavaScript', 'Vue', 'React'],
  '后端': ['Node.js', 'Python', 'Java', 'Spring', 'Django'],
  '全栈': ['HTML', 'CSS', 'JavaScript', 'Vue', 'React', 'Node.js', 'Python', 'Java']
})

// 计算属性
const isValidAge = computed(() => {
  const age = parseInt(userAge.value)
  return !isNaN(age) && age >= 18 && age <= 100
})

const filteredSkills = computed(() => {
  return selectedTechDirection.value ? allSkills.value[selectedTechDirection.value] : []
})

const selectedSkillsText = computed(() => {
  if (selectedSkills.value.length === 0) {
    return '请选择技能标签'
  } else if (selectedSkills.value.length <= 2) {
    return selectedSkills.value.join('、')
  } else {
    return `${selectedSkills.value[0]}、${selectedSkills.value[1]}...等${selectedSkills.value.length}项`
  }
})

const userStatus = computed(() => {
  if (userName.value === '' && userAge.value === '' && selectedSkills.value.length === 0) {
    return '新用户'
  }
  const age = parseInt(userAge.value)
  if (!isNaN(age) && age >= 35 && selectedSkills.value.length >= 3) {
    return '资深开发者'
  }
  return '潜力开发者'
})

const cardTheme = computed(() => {
  switch (selectedTechDirection.value) {
    case '前端':
      return { backgroundColor: '#3498db', color: 'white' }
    case '后端':
      return { backgroundColor: '#2ecc71', color: 'white' }
    case '全栈':
      return { backgroundColor: '#9b59b6', color: 'white' }
    default:
      return { backgroundColor: '#f1f1f1', color: '#333' }
  }
})

// 方法
const toggleTechDirectionDropdown = () => {
  isTechDirectionDropdownOpen.value = !isTechDirectionDropdownOpen.value
  isSkillsDropdownOpen.value = false // 关闭其他下拉菜单
}

const toggleSkillsDropdown = () => {
  isSkillsDropdownOpen.value = !isSkillsDropdownOpen.value
  isTechDirectionDropdownOpen.value = false // 关闭其他下拉菜单
}

const selectTechDirection = (direction) => {
  selectedTechDirection.value = direction
  // 重置技能选择
  selectedSkills.value = []
  isTechDirectionDropdownOpen.value = false
}

const toggleSkill = (skill) => {
  const index = selectedSkills.value.indexOf(skill)
  if (index > -1) {
    selectedSkills.value.splice(index, 1)
  } else {
    selectedSkills.value.push(skill)
  }
}

// 处理表单提交的方法
const submitForm = async () => {
  // 表单验证
  if (!userName.value.trim()) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '请输入姓名'
    return
  }

  if (userName.value.trim().length < 2) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '姓名至少需要2个字符'
    return
  }

  if (!userAge.value) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '请输入年龄'
    return
  }

  if (!isValidAge.value) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '年龄必须在18-100岁之间'
    return
  }

  if (!selectedTechDirection.value) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '请选择技术方向'
    return
  }

  if (selectedSkills.value.length === 0) {
    showResultModal.value = true
    submitSuccess.value = false
    submitMessage.value = '请至少选择一项技能'
    return
  }

  // 模拟提交过程
  isSubmitting.value = true

  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 模拟提交成功
    submitSuccess.value = true
    submitMessage.value = '表单提交成功！我们将尽快与您联系。'

    // 清空表单
    userName.value = ''
    userAge.value = ''
    selectedTechDirection.value = ''
    selectedSkills.value = []
  } catch (error) {
    // 模拟提交失败
    submitSuccess.value = false
    submitMessage.value = '提交失败，请稍后重试。'
    console.error('表单提交失败:', error)
  } finally {
    isSubmitting.value = false
    showResultModal.value = true
  }
}

// 关闭模态框
const closeModal = () => {
  showResultModal.value = false
}
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.form-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.input-group input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.error {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 4px;
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dropdown-toggle i {
  transition: transform 0.3s ease;
}

.rotate {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: #f5f5f5;
}

.info-card {
  margin-top: 20px;
  padding: 20px;
  border-radius: 8px;
  color: #333;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-3px);
}

.skill-tag {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.3);
  color: #333;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-size: 12px;
}

.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 10px;
}

/* 提交按钮样式 */
.submit-button {
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 4px;
  background-color: #3498db;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #2980b9;
}

.submit-button:disabled {
  background-color: #999;
  cursor: not-allowed;
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 300px;
  max-width: 90%;
  animation: fadeIn 0.3s ease-out;
}

.modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 20px;
  text-align: center;
}

.modal-footer {
  padding: 15px 20px;
}
</style>